$(function(){
    var i = 0;
    $(".ul li").mouseover(function(){
        i = $(this).index();
    	var a=-710*i+"px";
        $(".ul li").eq(i).css({background:'#A10000'}).siblings().css({background:"#1E1E1E"});
        $(".vanclFocus").stop().animate({left:a},500);  
		
    });
    
    var mouseX = 0;   //鼠标移动的位置X
  	var mouseY = 0;   //鼠标移动的位置Y
  	var maxLeft = 0;  //最右边
  	var maxTop = 0;   //最下边
  	var markLeft = 0; //放大镜移动的左部距离
  	var markTop = 0;  //放大镜移动的顶部距离
  	var perX = 0; //移动的X百分比
  	var perY = 0; //移动的Y百分比
  	var bigLeft = 0;  //大图要移动left的距离
  	var bigTop = 0;   //大图要移动top的距离
    //改变放大镜的位置
	  function updataMark($mark){
	    //通过判断，让小框只能在小图区域中移动
	    if(markLeft<0){
	      markLeft = 0;
	    }else if(markLeft>maxLeft){
	      markLeft = maxLeft;
	    }
	
	
	    if(markTop<0){
	      markTop = 0;
	    }else if(markTop>maxTop){
	      markTop = maxTop;
	    }
	
	    //获取放大镜的移动比例，即这个小框在区域中移动的比例
	    perX = markLeft/$(".small").outerWidth();
	    perY = markTop/$(".small").outerHeight();
	
	    bigLeft = -perX*$(".big").outerWidth();
	    bigTop = -perY*$(".big").outerHeight();
	
	    //设定小框的位置
	    $mark.css({"left":markLeft,"top":markTop,"display":"block"});
	  }
	  
	  //改变大图的位置
	  function updataBig(){
	    $(".big").css({"display":"block","left":bigLeft,"top":bigTop});
	  }
  	 //鼠标移出时
	  function cancle(){
	    $(".big").css({"display":"none"});
	    $(".mark").css({"display":"none"});
	  }
	
	  //鼠标小图上移动时
	  function imgMouseMove(event){
	
	    var $this = $(this);
	    var $mark = $(this).children(".mark");
	
	    //鼠标在小图的位置
	    mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
	    mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
	
	    //最大值
	    maxLeft =$this.width()- $mark.outerWidth();
	    maxTop =$this.height()- $mark.outerHeight();
	    markLeft = mouseX;
	    markTop = mouseY;
	
	    updataMark($mark);
	    updataBig();
	  }
	
	
	  $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
	$a= $('.tb-s40 img').attr('mid');
	 $('.tb-booth a img').attr({src:$a});
  	 $('.tb-s40 img').click(function(){
  	 	var mid=$(this).attr('mid');
  	 	$('.tb-booth a img').attr({src:mid});
  	 	var big=$(this).attr('big');
	 	$('.bigbox img').attr({src:big});
  	 })
  	
  	
})